<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://hol.com/functions" prefix="hfn"%>
<c:set var="base" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>英雄详情</title>
<link type="text/css" rel="stylesheet" href="${base}/foreground/css/bootstrap.css" >
<link type='text/css' rel='stylesheet' href="${base}/foreground/css/style.css" />
<link type="text/css" rel="stylesheet" href="${base}/res/layui/css/layui.css">
<style>

	*{
		margin:0;
		padding:0;
	}
	#user-text{
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow:hidden; 
		line-height:37px;
		-webkit-box-orient: vertical;
		margin-block-start: 1em;
   		 margin-block-end: 1em;
   		 margin-inline-start: 0px;
    	margin-inline-end: 0px;
    	font:14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
	}
	#user-text p{
		display: -webkit-box;
		-webkit-line-clamp: 2;
		overflow:hidden; 
		line-height:37px;
		-webkit-box-orient: vertical;
		margin-block-start: 1em;
   		 margin-block-end: 1em;
   		 margin-inline-start: 0px;
    	margin-inline-end: 0px;
    	font:14px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
	}
	#jiantou{
		background:url(${base}/foreground/images/jiantou.png) center center no-repeat;
		width: 33px;
		height: 11px;
		display: block;
		padding: 10px 0;
		margin-top: 16px;
	}
	#container{
		text-transform: uppercase;
		color: #fff;font-weight: 700;
		font: 16px 瀹嬩綋 Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
	}
	#hero_content{
		float:left;
		padding:30px 0 0;
		position:relative;
		margin:0;
		display:block;
		list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
        font: normal 12px/1.6em Microsoft YaHei,Tahoma,simsun;
    color: #666;
	}
	#hero_content li{
		float: left;
    width: 90px;
    height: 100px;
    margin-bottom: 22px;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    list-style-type: none;
    display: list-item;
    font: normal 12px/1.6em Microsoft YaHei,Tahoma,simsun;
    color: #666;
	}
	#hero_content a{
		color: #666;
		text-decoration: none;
		cursor: pointer;
		text-align: center;
    line-height: 15px;
    list-style-type: none;
    font: normal 12px/1.6em Microsoft YaHei,Tahoma,simsun;
	}
	#hero_content img{
		width: 66px;
    height: 65px;
    display: block;
    margin: 0 auto 7px;
    border: 0;
    color: -webkit-link;
    cursor: pointer;
    text-align: center;
    line-height: 15px;
    font: normal 12px/1.6em Microsoft YaHei,Tahoma,simsun;
	}
	#hero_content p{
		display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
	}
	#tab_title{
		overflow:hidden;
		height:90px;
		position:relative;
		z-index:2;
		display: block;
    	list-style-type: disc;
   		 margin-block-start: 1em;
   		 margin-block-end: 1em;
   		 margin-inline-start: 0px;
   		 margin-inline-end: 0px;
   		 padding-inline-start: 40px;
   		 font: normal 12px/1.6em Microsoft YaHei,Tahoma,simsun;
   	 color: #666;
	}
	.layui-tab-title .layui-this:after{
		border:1px solid #eee;
		height:64px
	}
	.nav>li>a:focus,.nav>li>a:hover{
		background-color:#000000;
	}
	.nav .open>a,.nav .open>a:focus,.nav .open>a:hover{
		background-color: #000000;
	} 
	.navbar-nav>li>.dropdown-menu{
		background-color: #000000;
	}
	.dropdown-menu>li>a{
		color:#fff;
	}
	#current_user{
		color: #fff;
	}
	.caret{
		color: #fff;
	}
	.modal-body table>tbody>tr>td{
		    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border-top: 1px solid #ddd;
    cursor: pointer;
	}
</style>

</head>
<body >
<div class="header">
	<div class="container">
		<div class="logo">
			<a href="index.jsp"><img src="${base}/foreground/images/logo.png" alt=""></a>
		</div>
	
		<div class="navigation">
			<ul class="navig cl-effect-3" style="float:left; width:400px">
				<li><a href="${base }/foreground/index.jsp">首页</a></li>
				<li><a href="${base }/foreground/hero.jsp">英雄资料</a></li>
				<li><a href="${base }/foreground/blog.jsp">联盟论坛</a></li>
				<li><a href="${base }/foreground/index.jsp">关于</a></li>
			</ul>
			<c:choose>
				<c:when test="${sessionScope.userName==null}">
					<ul class="navig cl-effect-3" style="float:right; width:200px">
						<li><a href="${base }/loginsystem/index.jsp">登录OR注册</a></li>
					</ul>
				</c:when>
				<c:otherwise>
						<div class="collapse navbar-collapse"
							id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav navbar-right">
								<li class="dropdown"><a href="#" class="dropdown-toggle"
									data-toggle="dropdown" role="button" aria-haspopup="true"
									aria-expanded="false"><span id="current_user"><img
											src="${sessionScope.userPic }" style="width: 40px;height: 40px;border-radius: 50%">${sessionScope.userName}</span>
										<span class="caret"></span></a>
									<ul class="dropdown-menu" style="cursor: pointer">
										<li><a data-toggle="modal" data-target="#myInfo">个人信息</a></li>
										<li><a data-toggle="modal" data-target="#myArticle">我的文章</a></li>
										<li><a data-toggle="modal" data-target="#modifyPassword">修改密码</a></li>
										<li role="separator" class="divider"></li>
										<li><a href="${base }/action/login/exit">退出登录</a></li>
									</ul></li>
							</ul>
						</div>
					</c:otherwise>
			</c:choose>
		</div>
	</div>
</div>

<div class="games">
	<div class="container">
		<div class="page-path">
			<ul class="path-list">
				<li><a href="${base }/foreground/index.jsp">首页</a></li>
				<li>&nbsp;&nbsp;/&nbsp;&nbsp;<li>
				<li> <a class="act" href="${base }/foreground/hero.jsp">英雄介绍</a></li>
			</ul>
			<p><a href="${base }/foreground/index.jsp">Back to 首页</a></p>
			<div class="clearfix"></div>
		</div>
		<div class="blog-content">
			<h3 class="page-header">${hero.heroName}</h3>
			<img src="${hero.heroSecPic }" alt="" style="width: 800px">
			<h3 class="page-header" style="margin-top: 40px ">背景故事</h3>
			<p>${hero.heroSecIntro }</p>
				
			<h3 class="page-header">技能介绍</h3>
				<div class="layui-tab">
					<ul class="layui-tab-title" id="tab_title" >
						<li ><a><img alt="" src="${hero.heroThiPic }"></a></li>
						<li><img alt="" src="${hero.heroFouPic }"></li>
						<li><img alt="" src="${hero.heroFivPic }"></li>
						<li><img alt="" src="${hero.heroSixPic }"></li> 
						<li><img alt="" src="${hero.heroSevPic }"></li>
					</ul>
					<div class="layui-tab-content" style="height:300px">
						<div class="layui-tab-item layui-show"><p>${hero.heroThiIntro }</p></div>
						<div class="layui-tab-item"><p>${hero.heroFouIntro }</p></div>
						<div class="layui-tab-item"><p>${hero.heroFivIntro }</p></div>
						<div class="layui-tab-item"><p>${hero.heroSixIntro }</p></div>
						<div class="layui-tab-item"><p>${hero.heroSevIntro }</p></div>
					</div>
				</div>
		</div>
           <div class="blog-sidebar" style="float:right;width:15%">
				<h3 class="page-header">英雄职业</h3>
				<ul class="product-categories color">
					<c:forEach var="d" items="${hfn:dict('英雄类型')}" varStatus="idx">       
      					<li class="cat-item cat-item-60"><a href="${base}/foreground/hero_list.jsp?typeId=${d.itemId}">${d.itemValue}</a><span class="count"></span></li>
      				</c:forEach>   
				 </ul>
				 <h3 class="page-header">英雄之地</h3>
				<ul class="product-categories color">
					<c:forEach var="d" items="${hfn:dict('英雄势力')}" varStatus="idx">       
      					<li class="cat-item cat-item-60"><a href="${base}/foreground/hero_list.jsp?typeId=${d.itemId}">${d.itemValue}</a><span class="count"></span></li>
      				</c:forEach>   
				 </ul>
			</div>
          <div class="clearfix"></div>
	</div>
</div>
<!-- 显示个人信息的模态框 -->
	<div class="modal fade" id="myInfo" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="max-width: 450px">
			<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">我的个人信息</h4>
					</div>
					<div class="modal-body" style="height: 280px">
						<iframe id="userInformation" width="100%" height="100%" frameborder="0" src="${base}/foreground/person_form.jsp"></iframe>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal" id="closeWin">关闭</button>
						<button type="button" class="btn btn-primary" id="subIframe">更改信息</button>
					</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	
<!-- 显示我的文章模态框 -->
	<div class="modal fade" id="myArticle" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true" style=" top: 35%;left: 40%;
            transform: translate(-50%,-50%);
             min-width:60%;
             overflow: visible;">
		<div class="modal-dialog" style="width: 1000px" >
			<div class="modal-content" >
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">我的文章</h4>
					</div>
					<div class="modal-body" style="height: 500px">
						<iframe id="article_list" width="100%" height="100%" frameborder="0" src="${base}/foreground/article_list.jsp"></iframe>
					</div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
	<!-- 修改密码模态框 -->
	<div class="modal fade" id="modifyPassword" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog" style="max-width: 450px">
			<div class="modal-content">
				<form action="${base}/action/user/modPassword" method="post" autocomplete="off" draggable="false" id="modPassword">
					<input type="hidden" name="id" value="${sessionScope.userId }">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改密码</h4>
					</div>
					<div class="modal-body">
						<table style="width: 100%">
							<tbody>
								<tr>
									<td width="30%">输入当前密码:</td>
									<td width="70%"><input type="password" class="form-control" name="oldPassword" id="oldPassword">
									</td>
								</tr>
								<tr>
									<td width="30%">输入新密码:</td>
									<td width="70%"><input type="password" class="form-control" name="newPassword" id="newPassword">
									</td>
								</tr>
								<tr>
									<td width="30%">确认新密码:</td>
									<td width="70%"><input type="password" class="form-control" name="passwordAgain" id="passwordAgain">
									</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary" onclick="checkPassword()">提交更改</button>
					</div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal -->
	</div>
</body>
<script type="text/javascript" src="${base}/foreground/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="${base}/foreground/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${base}/res/layui/layui.js"></script>
<script type="text/javascript">
	layui.use('element', function(){
	  var element = layui.element;
	});
</script>
</html>